<template>
<div class="bgwhite">

	<flexbox>
	    <flexbox-item class="text-center ">
	    	<div class="h4 mt20 mb20 ">
	    		共有 <span class="h1">{{totalRecord}}</span> 位粉丝
	    	</div>
	    </flexbox-item>
	</flexbox>

	<flexbox wrap="wrap" :gutter="0" >
		<flexbox-item v-for="item in list"  
		:span="1/6" class="text-center bgwhite">
			<img :src="item.headimg" width="100%" >
		</flexbox-item>
	</flexbox>

	<flexbox>
		<flexbox-item>
		<div class="more" v-if="hasmore" v-on:click="loadList()">
	  		查看更多
	  	</div>
	  	</flexbox-item>
	</flexbox>

</div>

</template>

<script>

import { mapGetters, mapActions } from 'vuex'

export default {
	name: 'fanslist',
	data () {
		return {
			'list' : [],
			'totalRecord' : 0,
			'pageNo' : 0,
			'pageSize' : 60,
			'hasmore' : false,
		}
	},

	computed: {
		// ...mapGetters([
		//     'fanslist',
		// ]),
	},

	methods: {

		loadList() {
			this.pageNo += 1;
			this.$store.dispatch('fansList', {
	  			'pageNo' : this.pageNo,
	  			'pageSize' : this.pageSize,
				'callback' : (res) => {
					this.totalRecord = res.totalRecord;
					if(this.pageNo == res.totalPage){
		  				this.hasmore = false;
		  			}else{
		  				this.hasmore = true;
		  			}
		  			if(res.results != undefined){
			    		this.list = [...this.list, ...res.results];
			    	}
				}
			});
        }
	},

	mounted () {
		this.loadList();
	},
}
</script>

<style scoped>
.more {
	height: 50px;
	line-height: 50px;
	text-align: center;
}


</style>
